/* 
    Document   : main
    Author     : Mariëlle Verwimp
    Description: All css that repeats on every page and has nothing to do with tables(with hover!) or forms    
*/
html, body{
    margin: 0;
    padding: 0;
    font-family: Calibri;
    font-size: 12px;
    background: #e3e3e3; /* some grey */
}
/* ***** things that could appear on every page ***** */
a{ text-decoration: none; } /* no line under links */
a img{ border: none; } /*IE border fix, no border around images */
p{ margin: 0; padding:0;}
.bold{ font-weight: bold; } /*bold text */
.italic{ font-style: italic; } /*italic text */
h2{ margin: 0 0 0 0.5%; padding: 0;}
/* ***** Items in top (log, clock, calendar, logo) *****  */
#top{ 
    margin: 0;
    padding: 0;
    background: url(../images/Backgrounds/bg_top_bar.png);
    height: 80px; /*height of image */
    width: 100% /* full screen, background is on repeat */
}
#logo{ /* the logo */
    margin: 10px 0 0 5px;
    float: left;
    background: url(../images/logo.png) no-repeat;
    height: 85px;
    width: 120px;
}
#help { margin: 40px 10px 0 0; float: right;}
#clock{ /* the clock with the time */
    margin: 5px 0 0 10px;
    padding: 0;
    float: left;
    height: 60px;
    width: 180px;
    background: url(../images/Backgrounds/bg_clock.png) no-repeat;
}
#clock #txt{ text-align: center; font-size: 40px; color: #29abe2; margin-top: 5px; } /* the time */
#calendar{ margin: 2px 0 0 10px; padding: 0; float: left; }
#bg_calendar{ /* background of calendar */
    height: 70px;
    width: 70px;
    background: url(../images/Backgrounds/bg_calendar.png) no-repeat;
    float: left;
}
#bg_calendar #datemonth{ /* the month text */
    color: #0073a7;
    font-size: 12px;
    font-weight: bold;
    padding: 0;
    margin: 15px 0 0 -8px;
    text-align: center;
}
#bg_calendar #dateday{ /* the date text */
    margin: -5px 0 0 -8px;
    padding: 0;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
}
#log{ /* log with edit and logout buttons and text with username*/
    margin: 0;
    padding: 0;
    width: 120px;
    height: 100px;
    float: left;
}
#log ul{
    float: left;
    list-style: none;
    margin-left: -30px;
    margin-top: 0px;
}
#log ul li{   } /* padding bottom button */
#log p{ font-size: 16px; color: white; float: left;  margin:0 0 0 17px;}
/* ***** Navigation ***** */
#nav{
    margin: -10px 0 0 0;
    padding: 0;
    width: 100%; /*full screen */
    float: left;
}
#nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav ul a li{ float: left; }
#nav ul a li img{ margin: 3px 5px -8px 3px; } /*places image right */
#nav ul a{
    margin: 0;
    padding: 0;
    color: white;
    font-size: 15px;
}
#nav .sel{
        height: 51px;
        width: 122px;
        background: url(../images/Backgrounds/bg_menu_tab_sel.png) no-repeat;
}
#nav .no_sel{
        height: 51px;
        width: 122px;
        background: url(../images/Backgrounds/bg_menu_tab_no_sel.png) no-repeat;
}
#nav .nav_prod{
    color: white;
    font-size: 15px;
}
#nav .nav_parts{
    color: white;
    font-size: 15px;
}
/* ***** Search ***** */
.bt_search{ /* The search button */
    background: url(../images/Buttons/bt_search.png)no-repeat;
    border: none;
    width: 57px;
    height: 24px;
}
.bt_search:hover{ /* The search button when hovering over it */
    background: url(../images/Buttons/bt_search_hov.png)no-repeat;
    border: none;
    width: 57px;
    height: 24px;
}
#refresh{
    background: url(../images/Buttons/bt_refresh.png)no-repeat;
    border: none;
    width: 58px;
    height: 24px;
}
#refresh:hover{
    background: url(../images/Buttons/bt_refresh_hov.png) no-repeat;
    border: none;
    width: 58px;
    height: 24px;
}
#del_list{ float: left; margin-top: -8px; }
#search,#search2{ float: left; margin-top: 5px; } /* the searches */
#search table, #search2 table{ float: left; } /* the tables in searches */
#search table tr,#search2 table tr{ float: left; } /* table rows in table of searches */
#search table th,#search2 table th{ font-weight: normal; } /* the table header rows in tables of searches */
#search fieldset,#search2 fieldset{ height: 30px; margin-bottom: 5px; max-width: 735px; } /* the field set in which the tables are and the del_list button */
#search input, #search select, #search2 input, #search2 select{ margin-top: -10px; } /* the input and select in searches */
#search .input_normal input, #search2 .input_normal input { width: 80px; }
#search .input_small input, #search2 .input_small input { width: 30px;}
#search legend, #search2 legend{ font-size: 14px;}
/* ***** All pages (background) ***** */
#page{
    margin-top: -20px;
    float: left;
    width: 100%;
    background: #29aae1;
    padding-bottom: 20px;
}
/* ***** Pager ***** */
.pagination{
    float: right;
    margin-top: -15px;
    margin-right: 0.5%;
}
.pagination_desc{
    float: right;
    margin-top: -13px;
    margin-right: 10px;
    color: white;
}
.pages_ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.pages_ul li{ float: left; margin-right: 2px;}
.pages_ul .front{ float: left; }
.bt_page{
    background: url(../images/Buttons/bt_empty.png) no-repeat;
    height: 19px;
    width: 22px;
}
.bt_page:hover{
    background: url(../images/Buttons/bt_empty_hov.png) no-repeat;
    height: 19px;
    width: 22px;
}
.pager_bt_txt{
    margin-left: 7px;
    font-size: 15px;
    font-weight: bold;
    color: black;
}
/* ***** Header on pages ***** */
#par_header{
    width: 99%;
    float: left;
    margin: 0 0.5%;
}
.button{
    float: left;
    width: 110px;
    height: 50px;
    margin-left: -10px;
}
#bt_area{
    width: 100%;
    height: 50px;
}
/* ***** Copyright ***** */
#copy{
    float: left;
}
/* ***** Tooltips ***** */
#tooltip1 { position: relative; top:-5px; left: 5px; }
#tooltip1 a span { display: none; color: black; }
#tooltip1 a:hover span { 
    display: block; 
    position: absolute; 
    width: 100px; 
    background-color: white; 
    height: 45px; 
    left: 35px; 
    top: -20px; 
    color: black; 
    padding: 5px; 
    border: 1px solid black;
}
#tooltip2 { position: relative; top:-5px; left: 5px; }
#tooltip2 a span { display: none; color: black; }
#tooltip2 a:hover span { 
    display: block; 
    position: absolute; 
    width: 100px; 
    background-color: white; 
    height: 45px; 
    left: 35px; 
    top: -20px; 
    color: black; 
    padding: 5px; 
    border: 1px solid black;
}